import { Device } from "@/api/interface/iot";
import { addProduct, removeProduct } from "@/api/modules/iot/product";
import { serviceStart, serviceStop } from "@/api/modules/service/service";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import OnlineStatus from "@/components/Sansan/Status/OnlineStatus";
import { MessageType } from "@/enums/messageEnum";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { dataFormat } from "@/utils/format";
import { confirm, showMsg, showTips } from "@/utils/util";
import { useRouter } from "vue-router";
import BasicDialog from "./components/serverDialog";
export default defineComponent({
	setup() {
		const router = useRouter();
		const initParam = reactive<Device.ReqProduct>({});

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};

		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		const getTableList = async (params: any) => {
			return { records: [] }; //getProductList(params);
		};
		const buttonsList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			buttonsList.value = await useAuthButtons();
		});
		const addDialog = reactive<any>({
			title: "添加产品",
			visible: false
		});
		const clickBtn = async (fn: string, row: any) => {
			switch (fn) {
				case "details":
					router.push({ path: "/iot/product/detail", query: { id: row.id, type: row.type } });
					break;
				case "add":
					addDialog.visible = true;
					break;
				case "del":
					if (!row.selectedListIds.length) {
						showMsg("请选择要删除的数据", MessageType.warning);
						return;
					}
					confirm({ content: "删除后无法找回，确定删除当前选择的产品" }).then(flag => {
						flag && submitDel({ id: row.selectedListIds.toString() });
					});
					break;
				case "copy":
					if (row.selectList.length != 1) {
						showMsg("请选择一条要复制的产品记录", MessageType.warning);
						return;
					}
					break;
				case "stop":
					if (!row.selectList[0]) {
						showMsg("请选择要操作的产品", MessageType.warning);
						return;
					}
					let res = await serviceStop(row.selectList[0].sn);
					showTips(res.code, "停止产品", res.message) && proTable.value.getTableList();
					break;
				case "start":
					if (!row.selectList[0]) {
						showMsg("请选择要操作的产品", MessageType.warning);
						return;
					}
					serviceStart(row.selectList[0].sn)
						.then(res => {
							showTips(res.code, "产品重启", res.message) && proTable.value.getTableList();
						})
						.catch(err => {
							console.log(err);
						});
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "productModel", label: "产品编码", search: { el: "input" } },
			{ prop: "name", label: "产品名称" },
			{ prop: "deptId", label: "所属分组" },
			{ prop: "deviceType", label: "产品类型" },
			{ prop: "descript", label: "产品描述" },
			{ prop: "createTime", label: "创建时间" },
			{ prop: "operation", label: "操作", fixed: "right", width: 130 }
		];

		const proTable = ref<any>();
		const detail = reactive<any>({});
		const submitDel = async (dataInfo: any) => {
			let res = await removeProduct({ ...dataInfo });
			let ok = showTips(res.code, "删除产品", res.message);
			if (ok) {
				proTable.value.clearSelection();
				proTable.value.reset();
			}
		};
		const submitAdd = async () => {
			detail.name = detail.name || detail.sn;
			let res = await addProduct({ ...detail });
			let ok = showTips(res.code, "添加产品", res.message);
			if (ok) {
				addDialog.visible = false;
				proTable.value.getTableList();
			}
		};
		return () => {
			return (
				<div>
					<BasicDialog
						width="800px"
						title={addDialog.title}
						v-model:visible={addDialog.visible}
						detail={detail}
						onSubmit={() => {
							submitAdd();
						}}
					></BasicDialog>
					<ProTable
						ref={proTable}
						title={buttonsList.value.length ? "" : "数据转发"}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return buttonsList.value?.map((item: any) => {
									return (
										<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
											<i class={`iconfont ${item.icon}`}></i>
											{item.menuName}
										</el-button>
									);
								});
							},
							createTime: (scope: any) => {
								return dataFormat("datetime", scope.row.createTime);
							},
							onlineStatus: (scope: any) => {
								return <OnlineStatus v-model={scope.row.onlineStatus} onlineLabel="运行中" offlineLabel="未启动" />;
							},
							operation: (scope: any) => {
								return (
									<>
										<el-link
											type="primary"
											link
											class="iconfont iconbx-file"
											onClick={() => {
												clickBtn("details", scope.row);
											}}
										>
											详情
										</el-link>
									</>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
